import ProCard from '@ant-design/pro-card';
import OverallOrganizationTree from './OverallOrganizationTree';
import OverallPanelCard from './OverallPanelCard';
import { Card, Col, Row } from 'antd';
import { useState } from 'react';

interface OverallGroupProps { }

const OverallGroup: React.FC<OverallGroupProps> = ({ }) => {

  const [selectOrganization, setSelectOrganizationIdState] = useState<any>({ id: '', name: '' });

  return (
    <>
      <ProCard
        bordered
        style={{
          marginTop: 24
        }}
        bodyStyle={{
          padding: 0,
        }}>
        
        <Row >
          <Col xl={6} lg={12} md={12} sm={24} xs={24}>
            <ProCard bordered={false} ghost>
              <OverallOrganizationTree onSelectOrganization={setSelectOrganizationIdState} />
            </ProCard>
          </Col>
          <Col xl={18} lg={12} md={12} sm={24} xs={24}>
            <ProCard bordered={false}  ghost>
              <OverallPanelCard selectOrganization={selectOrganization} />
            </ProCard>
          </Col>
        </Row>
      </ProCard>
    </>

  );
};

export default OverallGroup;
